<template>
  <a-float-button v-if="props.presentType=='floatButton'" type="primary" @click="openModal" tooltip="创建词语">
    <template #icon>
      <PlusOutlined />
    </template>

    Sub
  </a-float-button>


  <a-button size="small" v-if="props.presentType=='button'" type="primary" @click="openModal" >
    <template #icon>
      <PlusOutlined />
    </template>
    Sub
  </a-button>


  <a-modal
    :width="'60%'"
    v-model:open="open"
    title="Create SUB"
    :footer="null"
    :maskClosable="false"
  >
    <a-form
      :model="formState"
      name="basic"
      :label-col="{ span: 8 }"
      :wrapper-col="{ span: 16 }"
      autocomplete="off"
      ><a-row :gutter="24">
        <a-col :span="12">
          <a-form-item
            label="ID"
            name="id"
            :rules="[{ required: true, message: 'Please input id!' }]"
          >
            <a-input v-model:value="formState.id" />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item
            label="Name Cn"
            name="nameCn"
            :rules="[{ required: true, message: 'Please input name_cn!' }]"
          >
            <a-input v-model:value="formState.nameCn" />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item
            label="Name En"
            name="nameEn"
            :rules="[{ required: true, message: 'Please input name_en!' }]"
          >
            <a-input v-model:value="formState.nameEn" />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="Key Words" name="keyword">
            <a-input v-model:value="formState.keyword" />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="Description" name="desc">
            <a-input v-model:value="formState.desc" />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="Remark" name="remark">
            <a-input v-model:value="formState.remark" />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="Define" name="define">
            <a-input v-model:value="formState.define" />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="Usage" name="usage">
            <a-input v-model:value="formState.usage" />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item
            label="Order"
            name="order"
            :rules="[{ required: true, message: 'Please input order!' }]"
          >
            <a-input-number
              v-model:value="formState.order"
              :min="0"
              :max="100"
              :step="1"
            />
          </a-form-item>
        </a-col>

        <a-col :span="12">
          <a-form-item
            label="Topic"
            name="topic"
            :rules="[{ required: true, message: 'Please input order!' }]"
          >
            <a-select v-model:value="formState.topic">
              <a-select-option value="N">N</a-select-option>
              <a-select-option value="Y">Y</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>

        <a-col :span="12"> </a-col>
        <a-col :span="12">
          <a-form-item :wrapper-col="{ offset: 8, span: 16 }">
             <a-button  @click="clearForm">Clear</a-button>
            <a-button type="primary" @click="insertPmpItem">Submit</a-button>
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>

    <!-- {{ JSON.stringify(formState) }} -->
  </a-modal>
</template>

<script setup>
import pmpHooks from "@/hooks/PmpHooks.js";
import { ref, reactive, toRaw } from "vue";
import { messageApi, contextHolder } from "@/utils/MessageUtils.js";
import { PlusOutlined } from "@ant-design/icons-vue";
const open = ref(false);


const props = defineProps({
  presentType:{
    type:String,
    default:'button'
  }
});
function closeModal() {
  open.value = false;
}

function openModal() {
  // console.log('=====', props.id)
  // console.log('=====', data.value)
  open.value = true;
}

const formInitData = {
  id: "",
  nameCn: "",
  nameEn: "",
  keyword: "",
  desc: "",
  remark: "",
  define: "",
  usage: "",
  order: 0,
  topic: "N",
};
const formState = reactive(formInitData);

const createFormData = () => ({
  id: "",
  nameCn: "",
  nameEn: "",
  keyword: "",
  desc: "",
  remark: "",
  define: "",
  usage: "",
  order: 0,
  topic: "N",
})
async function insertPmpItem() {
  const obj = toRaw(formState);
  obj.classify = "SUB";
  const res = await pmpHooks.insertPmpItem(toRaw(formState));
  if (res.code == "200") {
    await pmpHooks.initPmpDict();
    messageApi.success("小词板创建成功");
    closeModal();
  } else {
    messageApi.error("小词板创建失败:" + res.msg);
  }
}

function clearForm(){
  Object.assign(formState,createFormData())
}
</script>

<style>
</style>